import { zing } from '@/shared/fonts';
import cn from 'classnames';

import cs from './RatingTag.module.scss';

const getColor = (value: number) => {
  if (value < 3) {
    return cs.negative;
  }
  if (value >= 3 && value < 4) {
    return cs.ok;
  }
  return cs.positive;
};
export const RatingTag = ({
  value,
  variant = 'primary',
  isCard,
}: {
  value: number;
  variant?: 'primary' | 'secondary' | 'sale';
  isCard?: boolean;
}) => (
  <div className={cn(cs.tag, zing.className, getColor(value), cs?.[variant], { [cs.isCard]: isCard })}>
    {variant !== 'sale' && value.toFixed(1)}
    {variant === 'sale' && `-${Math.floor(value).toString()}%`}
  </div>
);
